<template>
  <layout leftText="返回">
    <view class="uni-container">
      <view class="content" :style="[{backgroundColor:themeConfig.bgColor}]">

        当前页面的内容区域
        <view>全局filters,比如字数转换</view>
        <view>100= {{100| numberFormatter}}</view>
        <view>1000= {{1000| numberFormatter}}</view>
        <view>10000= {{10000| numberFormatter}}</view>
        <view>100000= {{100000| numberFormatter}}</view>
        <view>1000000= {{1000000| numberFormatter}}</view>
        <view>10000000= {{10000000| numberFormatter}}</view>

        <view>字体图标:
          <u-icon icon="ckq_money"></u-icon>
        </view>
        <view class="change-theme">
          <text>点击下面按钮可通过状态管理切换主题</text>
          <view class="change-box">
            <view class="change-item" v-for="(item,index) in themeList" :key="index"
                  @click="handleChangeBgColor(item.bgColor)">
              <view class="change-btn">主题{{index+1}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </layout>
</template>

<script>
  export default {
    data() {
      return {
        themeList: [
          {
            bgColor: '#fff',
          },
          {
            bgColor: '#007aff',
          },
          {
            bgColor: '#4cd964',
          },
          {
            bgColor: '#f0ad4e',
          },
          {
            bgColor: '#dd524d',
          },
        ]
      };
    },
    mounted() {
      this.fetchData();
    },
    methods: {
      /** 改变主题*/
      handleChangeBgColor(color) {
        this.$store.dispatch('settings/handleChangeVal', {key: 'theme', val: {bgColor: color}});
        uni.$API.Demo.demoPost({theme: this.$store.state.settings.theme}).then(res => {
          console.log('res:', res);
        })
      },
      /** 拉取数据*/
      fetchData() {
        uni.$API.Demo.demoList({isLoading: true}).then(res => {
          console.log('res', res);
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    padding: 50px 0;
    font-size: 30 upx;

    .change-theme {
      margin-top: 20px;

      .change-box {
        position: relative;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

        .change-item {
          padding: 10px;

          .change-btn {
            font-size: 32 upx;
            height: 60 upx;
            line-height: 60 upx;
            text-align: center;
            border: 1px solid #ccc;
          }
        }
      }
    }
  }
</style>
